<template>
	<div class="talentFrame">
		<div class="msgDiv" v-if="talent" @click="toDetail()">
			<div class="leftDiv">
				<img v-if="talent.headUrl" :src="talent.headUrl" >
				<img v-else src="@/assets/image/finance/txico.png" >
			</div>
			<div class="rightDiv">
				<span class="name"> {{ talent.name }} </span>
				<div class="flex-text">
					<!-- <span class="text-short">性别： {{ talent.genderName }}</span>
					<span class="text-short">学历： {{ talent.educationName }}</span> -->
					<span class="text" v-if="(skills && skills.length>0) && talent.skill">
            职称：{{ $selectDict(skills, talent.skill).dictLabel }}
          </span>
					<span class="text">
            擅长领域：{{ lndustryField(talent.lndustryField) }}
          </span>
				</div>
				<!-- <div>
					<span>经验描述： {{ talent.experienceDesc }}</span>
				</div> -->
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "talentFrame",
		props: ['talent'],
		data() {
			return {
				industryFields: [],
      	skills: []
			}
		},
		computed: {
			lndustryField() {
				return function(value){
					let strs = []
					if(value){
						strs = value.split(',')
					}
          let data = []
          if(this.industryFields && this.industryFields.length>0) {
            strs.forEach((el, i) => {
              data.push(this.$selectDict(this.industryFields, el).dictLabel)
            });
            let str = data.join(',')
            return str.length > 30 ? str.substring(0,30) + '...' : str
          }
					
				}
			}
		},
		mounted(){
			// this.skills = JSON.parse(localStorage.getItem('skills'))
      // this.industryFields = JSON.parse(localStorage.getItem('industryFields'))
     
    },
    created(){
      this.gettypeList()
    },
		methods: {
			/**
			 * 立即申请
			 */
			toDetail() {
        console.log('toDetail', this.talent)
				this.$router.push({ name: 'talentRecommendDetail', params: { talent: JSON.stringify(this.talent), isHelp: false } });
      },
      // 字典查询 
      async gettypeList() {
        let api = `company_industry, skill`;
        // 调用公共方法中的查询字典表
        this.getDictList(this, api).then((res) => {
          this.industryFields = res.company_industry;
          this.skills = res.skills;
        });
      },
		}
	}
</script>

<style lang="scss" scoped>
	.talentFrame {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24px 20px;
		border: 1px solid #eeeeee;
		transition: all 0.2s ease 0s;
		width: 292px;
		box-sizing: border-box;
		margin-bottom: 10px;
		margin-right: 10px;
		height: 130px;
		box-sizing: border-box;
		&:nth-child(4n+0){
			margin-right: 0;
		}
	}

	.talentFrame:hover {
		box-shadow: 0px 0px 10px #EEEEEE;
	}

	.talentFrame .msgDiv {
		display: flex;
		justify-content: left;
		align-items: center;
		text-align: left;
		width: 100%;
	}

	.talentFrame .msgDiv:hover{
		cursor: pointer;
	}

	.talentFrame .msgDiv .leftDiv{
		/* display: flex;
		align-items: center; */
		/* font-size: 22px;
		font-weight: 500; */
	}
	.talentFrame .msgDiv .leftDiv img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 15px;
		border: 1px solid #eeeeee;
	}
	.talentFrame .msgDiv .rightDiv{
		flex: 1;
		font-size: 14px;
		color: #333;
	}
	.talentFrame .msgDiv .rightDiv .name{
		font-size: 20px;
		color: #333;
		/* font-weight: bold; */
	}
	.talentFrame .msgDiv .rightDiv .flex-text{
		/* display: flex; */
		/* justify-content: space-between; */
		color: #999;
		font-size: 12px;
	}
	.talentFrame .msgDiv .rightDiv .flex-text .text{
		margin-right: 10px;
	}
</style>